import React, { useState, useEffect } from "react";
import { TodolistContext } from "./App";

const List = (props) => {
    return (
        <div>
            <ul>
                {/* 哪里用到Consumer，就用在哪里 */}
                {/* {props.list.map((item, index) => {
                    return <li key={index}>{item}</li>;
                })} */}
                <TodolistContext.Consumer>
                    {(state) => {
                        {
                            /* console.log(state); */
                        }
                        return state.list.map((item, index) => <li key={index}>{item}</li>);
                    }}
                </TodolistContext.Consumer>
            </ul>
        </div>
    );
};

/* export const List = ({ list }) => {
    return (
        <div>
            <ul>
                {list.map((item, index) => {
                    return <li key={index}>{item}</li>;
                })}
            </ul>
        </div>
    );
}; */
export default List;
